<mat-button-toggle-group style="z-index:2;" (change)="changeTab($event);echartsForceUpdateFlag=true;"
  [value]="checkValue" aria-label="Font Style" name="fontStyle">
  <mat-button-toggle value="1">终端上线率</mat-button-toggle>
  <mat-button-toggle value="2">终端使用时长</mat-button-toggle>
  <!-- <mat-button-toggle value="3">终端故障率</mat-button-toggle> -->
</mat-button-toggle-group>
<!-- <button>{{checkValue}}</button> -->

<!-- <input /> -->
<div id="datepicker-beautify-area" data-hacker *ngIf="checkValue!='3'" class="search" style="position: absolute;
width: 800px;
/* outline: solid 1px red; */
display: inline-block;
/* margin-right: 0%; */
right: 30px;">
  <!-- <span data-hacker="{hide:false}">
    <span>日期范围：</span>
    <input style="display:inline;width:237px;" class="form-control ng-pristine ng-valid ng-touched"
      id="custom-calender-trigger" data-hacker-value="{this.$refs.startTime.value}   
    ~    {this.$refs.endTime.value}" data-hacker />
  </span> -->


  <!-- data-hacker-css="pointer-events: none;" -->

  <span data-hacker="{transparent:true}" style="position: absolute;left:0;top:0;pointer-events: none;">
    <span>开始时间：</span>
    <input data-hacker id="start-time" (dateChange)="changeDate('change', $event,'start')" [matDatepicker]="picker"
      [max]="maxDate" [value]="searchForm.begindate" matInput placeholder="请选择开始时间">
    <mat-datepicker-toggle [for]="picker" matSuffix></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
    <span>结束时间：</span>
    <input data-hacker style="position: relative;left:20px;" id="end-time"
      (dateChange)="changeDate('change', $event,'end')" [matDatepicker]="picker2" [max]="maxDate"
      [value]="searchForm.enddate" matInput placeholder="请选择结束时间">
    <mat-datepicker-toggle [for]="picker2" matSuffix></mat-datepicker-toggle>
    <mat-datepicker #picker2></mat-datepicker>
  </span>

  <!-- test -->

  <button data-hacker="{group:'CALENDER_CONTROL_BTN',hide:true,id:'recentlyThreeMonth'}"
    (click)="quickFilter( 24 * 3600 * 1000*90)" color="primary" mat-stroked-button>最近三个月</button>
  <button data-hacker="{group:'CALENDER_CONTROL_BTN',hide:true}" id="recentlyOneMonth"
    (click)="quickFilter( 24 * 3600 * 1000*30)" color="primary" mat-stroked-button>最近一个月</button>
  <button data-hacker="{group:'CALENDER_CONTROL_BTN',hide:true}" id="recentlyOneWeek"
    (click)="quickFilter(7 * 24 * 3600 * 1000)" color="primary" mat-stroked-button>最近一周</button>
  <span style="float: right;">
    <span style="margin-right:20px;position:relative;left:-200px;">
      日期范围:
    </span>

    <nz-range-picker
    style="display:inline;width:237px;position:relative;left:-200px;"
    mDateRange
	#mDateRange (nzOnCalendarChange)="notifyParent" 
    [nzDisabledDate]="disabledDate" nzFormat=“yyyy-MM-dd” [nzSize]="size"></nz-range-picker>

    <!-- <button style="margin-right:15px;" (click)="query()" color="primary"
      mat-raised-button>查询</button> -->

      <!-- <button style="margin-right:15px;opacity:0;pointer-events: none;" (click)="query()" color="primary"
      mat-raised-button>查询</button> -->

      

    <button (click)="exportExcel()" color="primary" mat-stroked-button>导出</button>
    <button style="margin-left:15px;" *ngIf="checkValue=='2'" (click)="exportExcel(true)" color="primary" 
    mat-stroked-button>导出详细</button>

  </span>
</div>

<div *ngIf="echartsForceUpdateFlag==true">

  <div *ngIf="checkValue=='1'">
    <div>
      <div style="    width: 50%;
      display: inline-block;    margin-top: 20px;
    padding-left: 10px;
">
        终端上线率
        <i style="position: relative;
        top: 4px;" class="material-icons" [attr.alt]="terminalOnlinePercentTip"
          [attr.title]="terminalOnlinePercentTip">error_outline</i>
      </div>
      <div style="    width: 50%;
      display: inline-block;    margin-top: 20px;
    padding-left: 10px;
">
        终端数量（台）
        <i style="position: relative;
        top: 4px;" class="material-icons" [attr.alt]="terminalNumTip" [attr.title]="terminalNumTip">error_outline</i>
      </div>
    </div>
    <div [options]="options1" echarts class="echart"></div>
    <div [options]="options2" echarts class="echart"></div>
  </div>

  <div *ngIf="checkValue=='2'">
    <div>
      <div style="    width: 50%;
      display: inline-block;    margin-top: 20px;
    padding-left: 10px;
">
        终端使用时长（小时）
        <i style="position: relative;
        top: 4px;" class="material-icons" [attr.alt]="terminalUseHourCountTip"
          [attr.title]="terminalUseHourCountTip">error_outline</i>
      </div>
      <div style="    width: 50%;
      display: inline-block;    margin-top: 20px;
    padding-left: 10px;
">
        平均使用时长（小时）
        <i style="position: relative;
        top: 4px;" class="material-icons" [attr.alt]="terminalAverageUseHourCountTip"
          [attr.title]="terminalAverageUseHourCountTip">error_outline</i>
      </div>
    </div>
    <div [options]="options1" echarts class="echart"></div>
    <div [options]="options2" echarts class="echart"></div>
  </div>
</div>


<div *ngIf="checkValue=='3'">
  <div style="height:200px;line-height:200px;text-align:center;font-size:50px;">即将上线，敬请期待</div>
</div>